<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="task"
      @keydown.enter="downFn"
    />
  </header>
</template>

<script>
export default {
  props: ["arr"],
  data() {
    return {
      task: "",
    };
  },
  methods: {
    downFn() {
      // 先判断下用户输入的内容
      // 如果内容为空  提醒用 并终止程序
      if (this.task.length === 0) {
        alert("任务名不能为空");
        return;
      }
      // 如果输入不为空  把输入的任务 传到父亲那里
      // 子组件 传父组件
      this.$emit("create", this.task);
      // 清空任务输入
      this.task = "";
    },
  },
  computed: {
    isAll: {
      // 取值
      get() {
        // 只要数组中每一项的isDone是true 都是true  every方法  首先数组不能为空
        return (
          this.arr.length > 0 && this.arr.every((item) => item.isDone === true)
        );
      },
      // 设置值
      set(checked) {
        this.arr.forEach((item) => (item.isDone = checked));
      },
    },
  },
};
</script>